<template>
    <div class="xiaohui-form">
        <div class="page-header">
            <router-link to="/main/renshi/zhaoping/zhaopingxiudin" class="back-link">
                <i class="el-icon-arrow-left"></i>返回
            </router-link>
            <h2>文件销毁申请单</h2>
        </div>

        <el-form
            ref="form"
            :model="formData"
            :rules="rules"
            label-width="120px"
            class="form-container"
            :disabled="isView">
            
            <div class="form-header">
                <h1>深圳市艾美思普科技有限公司 文件销毁申请单</h1>
            </div>

            <div class="form-section">
                <el-table
                    :data="formData.details"
                    border
                    class="file-table">
                    <el-table-column
                        type="index"
                        label="序号"
                        width="60"
                        align="center">
                    </el-table-column>
                    <el-table-column label="文件编号" prop="fileNumber">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'details.' + scope.$index + '.fileNumber'"
                                :rules="rules.details.type === 'array' ? rules.details.defaultField.fields.fileNumber : null">
                                <el-input v-model="scope.row.fileNumber"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="文件名称" prop="fileName">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'details.' + scope.$index + '.fileName'"
                                :rules="rules.details.type === 'array' ? rules.details.defaultField.fields.fileName : null">
                                <el-input v-model="scope.row.fileName"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="版本" prop="version" width="100">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'details.' + scope.$index + '.version'"
                                :rules="rules.details.type === 'array' ? rules.details.defaultField.fields.version : null">
                                <el-input v-model="scope.row.version"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="份数" prop="copies" width="100">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'details.' + scope.$index + '.copies'"
                                :rules="rules.details.type === 'array' ? rules.details.defaultField.fields.copies : null">
                                <el-input-number
                                    v-model="scope.row.copies"
                                    :min="0"
                                    controls-position="right">
                                </el-input-number>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-if="!isView"
                        label="操作"
                        width="80"
                        align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                size="mini"
                                @click="removeFile(scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div v-if="!isView" class="table-actions">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="addFile">
                        新增文件
                    </el-button>
                      <el-button type="primary" size="small" icon="el-icon-view" @click="goToList">
                        查看列表
                    </el-button>
                </div>
            </div>

            <div class="form-section">
                <el-form-item label="销毁原因" prop="destructionReason">
                    <el-input
                        type="textarea"
                        v-model="formData.destructionReason"
                        :rows="3">
                    </el-input>
                </el-form-item>

                <el-form-item label="销毁日期" prop="destructionDate">
                    <el-date-picker
                        v-model="formData.destructionDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="{
                            disabledDate(time) {
                                return time.getTime() > Date.now();
                            },
                            shortcuts: [
                                {
                                    text: '今天',
                                    onClick(picker) {
                                        picker.$emit('pick', new Date());
                                    }
                                },
                                {
                                    text: '昨天',
                                    onClick(picker) {
                                        const date = new Date();
                                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                                        picker.$emit('pick', date);
                                    }
                                },
                                {
                                    text: '一周前',
                                    onClick(picker) {
                                        const date = new Date();
                                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                        picker.$emit('pick', date);
                                    }
                                }
                            ]
                        }"
                        style="width: 100%">
                    </el-date-picker>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="批准" prop="approver">
                            <el-input v-model="formData.approver"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="覆核" prop="reviewer">
                            <el-input v-model="formData.reviewer"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="审核" prop="auditor">
                            <el-input v-model="formData.auditor"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="经办" prop="handler">
                            <el-input v-model="formData.handler"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

            <div class="form-footer">
                <p class="form-info">表单编号及版本：AM - FR - 0009 A/0 生效日期：2006年11月1日 保存年限:长期</p>
                <div class="form-actions" v-if="!isView">
                    <el-button @click="$router.push('/main/biao/xiaohuiList')">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">保存</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import { getFileDestructionById, saveFileDestruction } from '@/api/fileDestruction'

export default {
    name: 'Xiaohui',
    data() {
        return {
            formData: {
                id: null,
                details: [{
                    fileNumber: '',
                    fileName: '',
                    version: '',
                    copies: 0,
                    remark: ''
                }],
                destructionReason: '',
                destructionDate: '',
                approver: '',
                reviewer: '',
                auditor: '',
                handler: ''
            },
            rules: {
                details: {
                    type: 'array',
                    required: true,
                    defaultField: {
                        type: 'object',
                        fields: {
                            fileNumber: [
                                { required: true, message: '请输入文件编号', trigger: 'blur' }
                            ],
                            fileName: [
                                { required: true, message: '请输入文件名称', trigger: 'blur' }
                            ],
                            version: [
                                { required: true, message: '请输入版本', trigger: 'blur' }
                            ],
                            copies: [
                                { required: true, message: '请输入份数', trigger: 'blur' },
                                { type: 'number', message: '份数必须为数字', trigger: 'blur' }
                            ]
                        }
                    }
                },
                destructionReason: [
                    { required: true, message: '请输入销毁原因', trigger: 'blur' }
                ],
                destructionDate: [
                    { required: true, message: '请选择销毁日期', trigger: 'change' }
                ],
                approver: [
                    { required: true, message: '请输入批准人', trigger: 'blur' }
                ],
                handler: [
                    { required: true, message: '请输入经办人', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        isView() {
            return this.$route.query.mode === 'view'
        }
    },
    created() {
        const id = this.$route.query.id
        if (id) {
            this.loadData(id)
        }
    },
    methods: {
        async loadData(id) {
            try {
                const res = await getFileDestructionById(id)
                const data = res.data
                console.log('后端返回的数据:', data)
                console.log('日期类型:', typeof data.destructionDate)
                
                let formattedDate = ''
                if (data.destructionDate) {
                    if (typeof data.destructionDate === 'string') {
                        formattedDate = data.destructionDate.split('T')[0]
                    } else if (data.destructionDate instanceof Date) {
                        formattedDate = data.destructionDate.toISOString().split('T')[0]
                    } else {
                        // 如果是时间戳或其他格式，转换为日期对象
                        formattedDate = new Date(data.destructionDate).toISOString().split('T')[0]
                    }
                }

                const formattedData = {
                    ...data,
                    destructionDate: formattedDate,
                    details: data.details || []
                }
                this.formData = formattedData
            } catch (error) {
                console.error('加载数据错误:', error)
                this.$message.error('加载数据失败：' + error.message)
            }
        },
        goToList() {
            this.$router.push('/main/biao/xiaohuiList')
        },
        addFile() {
            this.formData.details.push({
                fileNumber: '',
                fileName: '',
                version: '',
                copies: 0,
                remark: ''
            })
        },
        removeFile(index) {
            this.formData.details.splice(index, 1)
        },
        async handleSubmit() {
            try {
                await this.$refs.form.validate()
                const data = {
                    ...this.formData
                }
                await saveFileDestruction(data)
                this.$message.success('保存成功')
                this.$router.push('/main/biao/xiaohuiList')
            } catch (error) {
                if (error === false) {
                    this.$message.warning('请完善必填信息')
                } else {
                    this.$message.error('保存失败')
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.xiaohui-form {
    padding: 20px;
    // background-color: #f5f7fa;
    min-height: calc(100vh - 40px);

    .page-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        background-color: #fff;
        padding: 16px 24px;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

        .back-link {
            color: #409EFF;
            text-decoration: none;
            margin-right: 20px;
            display: flex;
            align-items: center;
            font-size: 14px;
            transition: all 0.3s;

            &:hover {
                opacity: 0.8;
            }

            i {
                margin-right: 5px;
            }
        }

        h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 500;
            color: #303133;
        }
    }

    .form-container {
        background-color: #fff;
        padding: 32px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

        :deep(.el-form-item__label) {
            font-weight: 500;
            color: #606266;
            padding-right: 20px;
        }

        :deep(.el-input__inner) {
            border-radius: 4px;
            transition: all 0.3s;
            &:hover, &:focus {
                border-color: #409EFF;
            }
        }

        :deep(.el-textarea__inner) {
            border-radius: 4px;
            min-height: 80px;
            transition: all 0.3s;
            &:hover, &:focus {
                border-color: #409EFF;
            }
        }

        :deep(.el-date-editor) {
            width: 100%;
            .el-input__inner {
                padding-left: 40px;
            }
            .el-range-separator {
                padding: 0 5px;
                line-height: 32px;
                width: auto;
                color: #909399;
            }
            &.el-date-editor--date {
                .el-range-input {
                    width: 42%;
                }
            }
            .el-picker-panel__content {
                margin: 15px;
            }
            .el-date-picker__header {
                margin: 12px;
                text-align: center;
                line-height: 22px;
            }
            .el-picker-panel__shortcut {
                color: #606266;
                padding: 6px 15px;
                &:hover {
                    color: #409EFF;
                }
            }
        }
    }

    .form-header {
        text-align: center;
        margin-bottom: 40px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EBEEF5;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 2px;
            background-color: #409EFF;
        }

        h1 {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
            color: #303133;
        }
    }

    .form-section {
        margin-bottom: 40px;

        .file-table {
            margin-bottom: 20px;
            border-radius: 4px;
            overflow: hidden;

            :deep(.el-table) {
                border: 1px solid #EBEEF5;

                th {
                    background-color: #f5f7fa;
                    color: #606266;
                    font-weight: 600;
                    padding: 12px 0;
                }

                td {
                    padding: 12px 0;
                }
            }

            :deep(.el-form-item) {
                margin-bottom: 0;
            }

            :deep(.el-input-number) {
                width: 100%;
                .el-input__inner {
                    text-align: left;
                }
            }

            :deep(.el-button--mini) {
                padding: 6px;
                &.is-circle {
                    transition: all 0.3s;
                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }
        }

        .table-actions {
            margin-top: 20px;
            display: flex;
            justify-content: center;

            .el-button {
                padding: 8px 20px;
                transition: all 0.3s;
                &:hover {
                    transform: translateY(-1px);
                }
            }
        }
    }

    .form-footer {
        border-top: 1px solid #EBEEF5;
        padding-top: 24px;
        margin-top: 40px;

        .form-info {
            text-align: center;
            color: #909399;
            font-size: 14px;
            margin-bottom: 24px;
            background-color: #f5f7fa;
            padding: 12px;
            border-radius: 4px;
            line-height: 1.6;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            gap: 16px;

            .el-button {
                min-width: 120px;
                padding: 12px 20px;
                font-size: 14px;
                transition: all 0.3s;

                &:hover {
                    transform: translateY(-1px);
                }

                &:first-child {
                    margin-right: 16px;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        padding: 12px;

        .page-header {
            padding: 12px 16px;
        }

        .form-container {
            padding: 20px 16px;
        }

        .form-header h1 {
            font-size: 20px;
        }

        :deep(.el-form-item__label) {
            float: none;
            display: block;
            text-align: left;
            padding: 0 0 8px;
        }

        .el-form-item__content {
            margin-left: 0 !important;
        }

        .form-footer {
            .form-actions {
                flex-direction: column;
                gap: 12px;

                .el-button {
                    width: 100%;
                    margin-right: 0 !important;
                }
            }
        }
    }
}
::v-deep .el-form-item {
  .el-form-item__content {
    margin-left: 0px !important;
  }
}
</style>